<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
</head>
<link rel="stylesheet" href="backend/bootStrap/css/bootstrap.min.css">
<link rel="stylesheet" href="backend/css/main.css">
<body>
<div id="content4" class="content-body">
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <!--嵌套基础面板：处理用户列表面板-->
            <div class="text-center" style="margin-top: 30px;">
                <!--内联表单-->
                <form class="form-inline" action="./orderList" method="post" id="selectUsers" style="font-size: 18px;margin-bottom: 6px;margin-top: 6px;">
                    <div class="form-group">
                        <label for="selectOrderID">订单ID</label>
                        <input type="text" class="form-control" id="selectOrderID" name="selectOrderID" value="${param.selectOrderID }" style="width: 80px;">
                    </div>
                    <div class="form-group">
                        <label for="selectUserID">用户ID</label>
                        <input type="text" class="form-control" id="selectUserID" name="selectUserID" value="${param.selectUserID }" style="width: 80px;">
                    </div>
                    <div class="form-group">
                        <label for="selectGoodsID">商品ID</label>
                        <input type="text" class="form-control" id="selectGoodsID" name="selectGoodsID" value="${param.selectGoodsID }" style="width: 80px;">
                    </div>
                    <div class="form-group">
                        <label for="selectGoodsName">商品名称</label>
                        <input type="text" class="form-control" id="selectGoodsName" name="selectGoodsName" placeholder="男装牛仔裤" value="${param.selectGoodsName }">
                    </div>
                    <div class="form-group">
                        <label for="selectOrderState">订单状态</label>
                        <select class="form-control" id="selectOrderState" name="selectOrderState">
                            <option value="" hidden>请选择</option>
                            <option value="0" ${param.selectOrderState == '0' ? 'selected' : ''}>未发货</option>
                            <option value="1" ${param.selectOrderState == '1' ? 'selected' : ''}>派送中</option>
                            <option value="2" ${param.selectOrderState == '2' ? 'selected' : ''}>已签收</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-success">Send</button>
                    <button type="reset" class="btn btn-primary">Reset</button>
                </form>
            </div>
            <!--栅格布局-->
            <div class="row">
                <div class="col-md-12">
                    <!--表格-->
                    <table class="table table-hover table-bordered" style="width: 100%;">
                        <thead class="thead-light">
                        <tr>
                            <th style="white-space:nowrap;">订单ID</th>
                            <th style="white-space:nowrap;">用户ID</th>
                            <th style="white-space:nowrap;">商品ID</th>
                            <th style="white-space:nowrap;">商品名称</th>
                            <th style="white-space:nowrap;">照片</th>
                            <th style="white-space:nowrap;">商品备注</th>
                            <th style="white-space:nowrap;">单价</th>
                            <th style="white-space:nowrap;">数量</th>
                            <th style="white-space:nowrap;">总额</th>
                            <th style="white-space:nowrap;">收货地址</th>
                            <th style="white-space:nowrap;">状态</th>
                            <th style="white-space:nowrap;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:if test="${empty orders }">
                            <th colspan="12">暂无数据</th>
                        </c:if>
                        <c:if test="${!empty orders }">
                            <c:forEach var="order" items="${orders }">
                                <tr style="font-size: 18px">
                                    <td style="white-space:nowrap;">${order.orderId}</td>
                                    <td style="white-space:nowrap;">${order.userId}</td>
                                    <td style="white-space:nowrap;">${order.goodsId}</td>
                                    <td style="white-space:nowrap;">
                                        <span>${fn:substring(order.goodsName, 0, 5)}...</span>
                                        <span id="orderGoodsNameAll" style="display: none;">${order.goodsName }</span>
                                    </td>
                                    <td><img src="${order.goodsImage }" alt="${order.goodsImage }" style="width: 45px;height: 45px;"></td>
                                    <td style="white-space:nowrap;">
                                        <span>${fn:substring(order.note, 0, 5)}...</span>
                                        <span id="orderNoteAll" style="display: none;">${order.note }</span>
                                    </td>
                                    <td style="white-space:nowrap;">${order.price }</td>
                                    <td style="white-space:nowrap;">${order.qty }</td>
                                    <td style="white-space:nowrap;">${order.orderSum }</td>
                                    <td style="white-space:nowrap;">
                                        <span>${fn:substring(order.address, 0, 5)}...</span>
                                        <span id="orderAddressAll" style="display: none;">${order.address }</span>
                                    </td>
                                    <td style="white-space:nowrap;">
                                        <span id="stateAll" style="display: none;">${order.state }</span>
                                        <c:choose>
                                            <c:when test="${order.state == 0}">
                                                未发货
                                            </c:when>
                                            <c:when test="${order.state == 1}">
                                                派送中
                                            </c:when>
                                            <c:when test="${order.state == 2}">
                                                已签收
                                            </c:when>
                                        </c:choose>
                                    </td>
                                    <td style="white-space:nowrap;">
                                        <a href="#" class="btn btn-danger btn-md" onclick="confirmDelete(${order.orderId})">删除</a>
                                        <a href="#" class="btn btn-info btn-md" data-toggle="modal" data-target="#updateOrderModal">修改</a>
                                    </td>
                                </tr>
                            </c:forEach>
                            <tr>
                                <th colspan="12">${page }</th>
                            </tr>
                            <!-- 模态框（Modal） -->
                            <div class="modal fade" id="updateOrderModal" tabindex="-1" role="dialog" aria-labelledby="updateOrderModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header" style="background-color: #f5f5f5; border-top-left-radius: 5px; border-top-right-radius: 5px;">
                                            <h5 class="modal-title" id="updateOrderModalLabel">修改商品信息</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body" style="padding: 20px; background-color: #fff; font-size: 18px;font-family: 微软雅黑">
                                            <!-- 表单内容 -->
                                            <form method="post" action="./updateAOrder" id="updateForm" enctype="multipart/form-data" >
                                                <div class="form-group">
                                                    <label for="updateOrderId">订单ID</label>
                                                    <input type="text" class="form-control" id="updateOrderId" name="updateOrderId" readonly>
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateUserId">用户ID</label>
                                                    <input type="text" class="form-control" id="updateUserId" name="updateUserId">
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateGoodsId">商品ID</label>
                                                    <input type="text" class="form-control" id="updateGoodsId" name="updateGoodsId">
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateGoodsName">商品名称</label>
                                                    <input type="text" class="form-control" id="updateGoodsName" name="updateGoodsName">
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateGoodsImage">图片</label>
                                                    <span id="updateGoodsImage">
                                                        <img src="" id="avatar" class="avatar" style="width: 80px;height: 80px;">
                                                        <input type="text" class="form-control" id="aheadImg" name="aheadImg" style="display: none;">
                                                        <input type="file" id="file-input" name="file-input">
                                                    </span>
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateGoodsNote">商品备注</label>
                                                    <input type="text" class="form-control" id="updateGoodsNote" name="updateGoodsNote">
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateGoodsPrice">单价</label>
                                                    <input type="text" class="form-control" id="updateGoodsPrice" name="updateGoodsPrice">
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateQty">数量</label>
                                                    <input type="text" class="form-control" id="updateQty" name="updateQty">
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateOrderSum">总额</label>
                                                    <input type="text" class="form-control" id="updateOrderSum" name="updateOrderSum">
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateAddress">收货地址</label>
                                                    <input type="text" class="form-control" id="updateAddress" name="updateAddress">
                                                </div>
                                                <div class="form-group">
                                                    <label for="updateState">状态</label>
                                                    <select class="form-control" id="updateState" name="updateState">
                                                        <option  value="0">未发货</option>
                                                        <option  value="1">派送中</option>
                                                        <option  value="2">已签收</option>
                                                    </select>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer" style="text-align: right;">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary" id="updateOrder" onclick="updateOrder()">保存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="backend/js/jquery-3.7.1.js"></script>
<script src="backend/bootStrap/js/bootstrap.min.js"></script>
<script>
    // 获取所有修改按钮
    var updateBtns = document.querySelectorAll('.btn-info');

    // 遍历修改按钮，为每个按钮添加点击事件
    for (var i = 0; i < updateBtns.length; i++) {
        updateBtns[i].addEventListener('click', function() {
            // 获取当前行的数据
            var row = this.parentElement.parentElement;
            var orderId = row.cells[0].innerText;
            var userId = row.cells[1].innerText;
            var goodsId = row.cells[2].innerText;
            var goodsName = row.cells[3].querySelector('#orderGoodsNameAll').innerText;
            var goodsImage = row.cells[4].querySelector('img').src;
            var note = row.cells[5].querySelector('#orderNoteAll').innerText;
            var price = row.cells[6].innerText;
            var qty = row.cells[7].innerText;
            var orderSum = row.cells[8].innerText;
            var address = row.cells[9].querySelector('#orderAddressAll').innerText;
            var state = row.cells[10].querySelector('#stateAll').innerText;
            // 将数据填充到模态框中
            document.getElementById('updateOrderId').value = orderId;
            document.getElementById('updateUserId').value = userId;
            document.getElementById('aheadImg').value = goodsImage;
            document.getElementById('updateGoodsImage').querySelector('img').src = goodsImage;
            document.getElementById('updateGoodsId').value = goodsId;
            document.getElementById('updateGoodsName').value = goodsName;
            document.getElementById('updateGoodsNote').value = note;
            document.getElementById('updateGoodsPrice').value = price;
            document.getElementById('updateQty').value = qty;
            document.getElementById('updateOrderSum').value = orderSum;
            document.getElementById('updateAddress').value = address;
            document.getElementById('updateState').value = state;
        });
    }
    // 为模态框的保存按钮添加点击事件
    document.querySelector('#updateOrder').addEventListener('click', function() {
        // 提交修改后的数据
        document.getElementById('updateForm').submit();
        // 关闭模态框
        $('#updateOrderModal').modal('hide');
    });
</script>
<script>
    document.getElementById('add-file-input').addEventListener('change', function (e) {
        var file = e.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('addAvatar').src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>
<script>
    function confirmDelete(orderId) {
        if (confirm('确定要删除吗？')) {
            window.location.href = './deleteAOrder?id=' + orderId;
        }
    }
</script>
<script>
    window.onload = function() {
        checkError();
    }
    function checkError() {
        var errorMsg = "${errorMsg}";
        var successMsg = "${successMsg}";
        if (successMsg){
            alert(successMsg);
            <% session.removeAttribute("successMsg"); %>
        }
        if (errorMsg) {
            alert(errorMsg);
            <% session.removeAttribute("errorMsg"); %>
        }
    }
</script>
</body>
</html>
